<template>
  <div class="createPost-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>挂号信息</span>
        <el-button type="text" icon="el-icon-search" style="float: right; padding: 0 5px">预约选择</el-button>
        <el-button type="text" icon="el-icon-tickets" style="float: right; padding: 0 5px">挂号</el-button>
      </div>
      <el-form ref="postForm" label-width="100px">
        <el-row>
          <el-col :span="4">
            <el-form-item>
              <el-select v-model="info.Type" style="width:100%">
                <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-input v-model="info.CaseNo" />
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item>
              <el-radio-group v-model="info.Type" size="medium" @change="onTypeChange">
                <el-radio-button v-for="item in types" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="病历号:">
              <el-input v-model="info.CaseNo" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="姓名:">
              <el-input v-model="info.TrueName" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="性别:">
              <el-select v-model="info.Sex" style="width:100%">
                <el-option v-for="item in filter.SexTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年龄:">
              <el-input v-model="info.Age" />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item label-width="0">
              <el-select v-model="info.Sex" style="width:100%">
                <el-option v-for="item in filter.AgeTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="出生年月:">
              <el-date-picker v-model="info.Birthday" type="date" placeholder="选择日期" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="结算类别:">
              <el-select v-model="info.FeeType" style="width:100%">
                <el-option v-for="item in filter.JSTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="医疗证号:">
              <el-input v-model="info.CardNo" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="医疗类别:">
              <el-select v-model="info.YLType" style="width:100%">
                <el-option v-for="item in filter.YLTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="证件类型:">
              <el-select v-model="info.FeeType" style="width:100%">
                <el-option v-for="item in filter.ZHTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="证件号码:">
              <el-input v-model="info.IDNo" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="优惠方式:">
              <el-select v-model="info.YHType" style="width:100%">
                <el-option v-for="item in filter.YHTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="联系电话:">
              <el-input v-model="info.Telephone" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="家庭住址:">
              <el-cascader v-model="info.SelectedCSDOptions" :options="areaOptions" clearable style="width:100%" @change="chooseCSD" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="0">
              <el-input v-model="info.IDNo" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="工作单位:">
              <el-input v-model="info.GZDW" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="看诊日期:">
              <el-date-picker v-model="info.DiagnoseOn" type="date" placeholder="选择日期" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="号别:">
              <el-select v-model="info.HBType" style="width:100%">
                <el-option v-for="item in filter.HBTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="挂号科室:">
              <el-select v-model="info.Section" style="width:100%">
                <el-option v-for="item in filter.Sections" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="看诊医生:">
              <el-select v-model="info.Doctor" style="width:100%">
                <el-option v-for="item in filter.Doctors" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="应收金额:">
              <el-input-number v-model="info.Amount" :precision="2" :step="0.1" style="width:100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="挂号来源:">
              <el-select v-model="info.Source" style="width:100%">
                <el-option v-for="item in filter.Sources" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="医保诊断:">
              <el-input v-model="info.YBZD" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="病历本:">
              <el-checkbox v-model="info.BLBEnable" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="挂号渠道:">
              <el-select v-model="info.Channel" style="width:100%">
                <el-option v-for="item in filter.Channels" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-form-item label="商保公司:">
              <el-input v-model="info.SBGS" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="商保单号:">
              <el-input v-model="info.SBDH" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="商保限额:">
              <el-input-number v-model="info.SBXE" :precision="2" :step="0.1" style="width:100%" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="商保患者:">
              <el-checkbox v-model="info.SBEnable" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="病人凭证信息" name="first">
            <el-row>
              <el-col :span="6">
                <el-form-item label="单位代码:">
                  <el-input v-model="info.DWCode" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="区县代码:">
                  <el-input v-model="info.QXCode" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单位名称:">
                  <el-input v-model="info.DWName" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="凭证号:">
                  <el-input v-model="info.PZH" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="医疗项目:">
                  <el-select v-model="info.FeeType" style="width:100%">
                    <el-option v-for="item in filter.JSTypes" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="凭证诊断:">
                  <el-select v-model="info.FeeType" style="width:100%">
                    <el-option v-for="item in filter.JSTypes" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="开始日期:">
                  <el-date-picker v-model="info.Birthday" type="date" placeholder="选择日期" style="width:100%" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="终止日期:">
                  <el-date-picker v-model="info.Birthday" type="date" placeholder="选择日期" style="width:100%" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>挂号信息列表</span>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="日期"
            width="180"
          />
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
        </el-table>
      </div>
    </el-card>
    <div class="fixed-footer">
      <span name="tip1" class="tip">F1：新病人</span>
      <span name="tip2" class="tip">F11：读卡</span>
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button>取 消</el-button>
    </div>
  </div>
</template>

<script>
import { orgList } from '@/api/demo'
import { pcaTextArr // 省市区联动数据，纯汉字
} from 'element-china-area-data'
export default {
  name: 'RegistrationEdit',
  props: {
    isCreate: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loadingMedicine: false, // 加载药品
      activeName: 'first',
      areaOptions: pcaTextArr,
      types: [{ value: '1', label: '医保卡' }, { value: '2', label: '四合一' }, { value: '3', label: '电子凭证' }, { value: '4', label: '社保卡' }, { value: '5', label: '电子社保卡' }, { value: '6', label: '医保刷脸' }], // 卡类型
      filter: {
        JSTypes: [{ value: '1', label: '自费' }, { value: '2', label: '公费' }, { value: '3', label: '医保' }, { value: '4', label: '大病医疗' }, { value: '5', label: '本院' }, { value: '6', label: '记账' }, { value: '99', label: '其他' }], // 结算类别
        SexTypes: [{ value: '1', label: '男' }, { value: '2', label: '女' }, { value: '99', label: '其他' }], // 性别
        AgeTypes: [{ value: '1', label: '岁' }, { value: '2', label: '月' }, { value: '99', label: '周' }], // 年龄单位
        ZHTypes: [{ value: '1', label: '居民身份证' }], // 证件类型
        YLTypes: [], // 医疗类别
        YHTypes: [], // 优惠方式
        HBTypes: [{ value: '1', label: '免费号' }], // 号别
        Sections: [], // 挂号科室
        Doctors: [], // 看诊医生
        Sources: [{ value: '1', label: '窗口挂号' }], // 挂号来源
        Channels: [{ value: '1', label: '现场挂号' }] // 挂号渠道
      },
      info: {
        CardNo: '110001',
        CaseNo: '110001',
        Type: '1',
        FeeType: '1',
        Sex: '1',
        SelectedCSDOptions: []
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeyDown) // 增加键盘监听
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyDown) // 删除键盘监听
  },
  methods: {
    async getList() {
      const res = await orgList()
      console.log(res)
    },
    handleKeyDown(e) {
      const that = this
      const { info } = that
      if (e.keyCode >= 112 && e.keyCode <= 123) {
        this.$message('监测到：' + e.key)
        switch (e.keyCode) {
          case 112:
            info.Type = 4
            break
          default:
            break
        }
        e.preventDefault()
      }
    },
    onTypeChange(e) {
      this.$message('切换到：' + this.types.filter(m => m.value === e)[0].label)
    },
    chooseCSD(e) {
      console.log(e)
    },
    handleTabClick(tab, event) {
      console.log(tab, event)
    },
    submitForm() {
      console.log(this.info)
    }
  }
}
</script>

  <style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .box-card {
    margin: 10px;
  }
  .fixed-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$sideBarWidth});
    transition: width 0.28s;
    padding: 10px;
    border-top: 1px solid #ddd;
    background-color: #fff;

    .tip{
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      color: #606266;
      text-align: center;
      font-weight: 400;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
    }

    button{
      float:right;
      margin-left: 10px;
    }
  }

    .hideSidebar .fixed-footer {
    width: calc(100% - 54px)
    }

    .mobile .fixed-footer {
    width: 100%;
    }
  </style>
